<template>
  <div style="width: 100%; height: 100%">
    <div id="map"></div>
  </div>
</template>

<script>
// import { BMap } from 'vue-baidu-map'

import { BMPGL } from "@/common/map/bmpgl.js"
// import { newMap } from '@/common/map/map.js'
export default {

  data () {
    //这里存放数据
    return {
      map: null, // 地图实例对象
    };
  },
  mounted () {
    // 为了防止地图加载报错或白屏，这里使用this.$nextTick()
    this.$nextTick(() => {
      this.initGL();
    });
  },
  methods: {
    initGL () {
      BMPGL().then((BMapGL) => {
        // 创建地图实例
        let map = new BMapGL.Map("map");
        // 创建点坐标 axios => res 获取的初始化定位坐标
        let point = new BMapGL.Point(114.031761, 22.542826)
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 19)
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        map.setHeading(64.5)
        map.setTilt(73)
        // 保存数据
        // this.myMap = map
        map.setMapStyleV2({
          style: 'midnight'
        });
      })
        .catch((err) => {
          console.log(err)
        })
    },
  }
}
</script>
<style scoped>
/* css */
#map {
  width: 100%;
  height: 100%;
}
</style>